<template>
  <div>
    <!--   搜索-->
    <div style="display: flex;flex-wrap: wrap">
     <span style="margin:0 15px 10px 0">仓库： <el-select size="small" style="width: 200px;margin-right: 10px;" clearable
                                                       v-model="params.areaId"
                                                       filterable
                                                       placeholder="请选择仓库">
        <el-option v-for="item in provinceOptions" :key="item.area" :label="item.areaName"
                   :value="item.area">
        </el-option>
      </el-select></span>
      <span style="margin:0 15px 10px 0"> sku编码：
        <el-input size="small" style="width: 200px"
                  clearable
                  v-model="params.skuCode"
                  placeholder="请输入编码"></el-input></span>
      <span style="margin:0 15px 10px 0"> 材料名称：
        <el-input size="small" style="width: 200px"
                  v-model="params.goodName"
                  clearable
                  placeholder="请输入材料名称"></el-input></span>
      <span style="margin:0 15px 10px 0"> 规格：
        <el-input size="small" style="width: 200px"
                  v-model="params.spec"
                  clearable
                  placeholder="请输入规格"></el-input></span>
      <span style="margin:0 15px 10px 0"> 类型：
      <el-select size="small" style="width: 200px;margin-right: 10px;" clearable
                 v-model="params.type"
                 filterable
                 placeholder="请选择类型">
        <el-option label="装修材料"
                   value="2"/>
          <el-option label="货架"
                     value="1"/>

      </el-select></span>
      <span style="margin:0 15px 10px 0">
        <el-button size="small" type="primary" @click="_search">查 询</el-button>
        <el-button size="small" type="primary" @click="_reset">重 置</el-button>
        <el-button size="small" type="primary" @click="_add" v-if="authority.includes(1211)">新增数据</el-button>
      </span>
    </div>
    <el-table :data="skuData" border
              height="calc(100vh - 250px)"
              :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
              :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }">
      <el-table-column type="index" label="序号" width="60px"></el-table-column>
      <el-table-column prop="areaName" label='仓库' width="120px"></el-table-column>
      <el-table-column prop="skuCode" label='SKU编码' width="120px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="type" label='类型' width="120px">
        <template v-slot:default="scope">
            <span :style="{color: scope.row.type == 2 ? '#1E90FF' : '#FF8C00',}">{{
                scope.row.type == 2 ? '装修材料' : '货架'
              }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodName" label='材料名称' show-overflow-tooltip></el-table-column>
      <el-table-column prop="unit" label='单位' width="60px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="color" label='颜色' width="60px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="size" label='规格' show-overflow-tooltip></el-table-column>
      <el-table-column prop="allQuantity" label='单品实时库存' width="120px">
        <template v-slot:default="scope">
          <span style="color: #1E90FF;font-weight: bold">{{ scope.row.allQuantity }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label='手持设备库存' width="120px">
        <template v-slot:default="scope">
          <span style="color: #ff6a00;font-weight: bold;text-decoration: underline;cursor: pointer"
                @click="getTagList(scope.row)">{{ scope.row.num }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="inboundQuantity" label='待关联库存' width="120px">
        <template v-slot:default="scope">
          <span style="color: #ff6a00;font-weight: bold">{{ scope.row.inboundQuantity }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="a" label='雷达扫描库存' width="120px"></el-table-column>-->
      <!--      <el-table-column prop="maxGoodsNum" label='标签最大承载商品数量'></el-table-column>-->
      <!--      <el-table-column prop="position" label='位置坐标'></el-table-column>-->
      <!--      <el-table-column prop="updateTime" label='盘点更新时间' width="120px" show-overflow-tooltip></el-table-column>-->
      <el-table-column prop="editTime" label='库存更新时间' width="120px" show-overflow-tooltip></el-table-column>
      <!--      <el-table-column prop="epc" label='epc编码' width="150px" show-overflow-tooltip></el-table-column>-->
      <!--      <el-table-column prop="fixedTagsNum" label='标签固定数量' width="120px"></el-table-column>-->
      <!--      <el-table-column prop="tagsNum" label='本次盘点数量' width="120px"></el-table-column>-->
      <!--      <el-table-column prop="num" label='是否漏扫' width="100px">-->
      <!--        <template v-slot:default="scope">-->
      <!--          <span v-if="scope.row.hasLeak==1">是</span>-->
      <!--          <span v-if="scope.row.hasLeak==0">否</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label='操作' width="100px" fixed="right">
        <template v-slot:default="scope">
          <el-link style="color: #66b1ff" @click='_edit(scope.row)' v-if="authority.includes(1212)">编辑</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        style="padding: 20px 0"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
    >
    </el-pagination>

    <el-dialog :visible.sync="editDialog" :title="title" width="35%">
      <div class="editDiv">
        <p><span style="width: 80px;">仓库名称：</span>
          <el-select size="small" style="width: 250px;margin-right: 10px;" clearable
                     v-model.number="editForm.areaId"
                     filterable
                     :disabled="title=='编辑'"
                     placeholder="请选择仓库">
            <el-option v-for="item in provinceOptions" :key="item.area" :label="item.areaName"
                       :value="item.area">
            </el-option>
          </el-select>
        </p>
        <p><span style="width: 80px;">类型：</span>
          <el-select size="small" style="width: 250px;margin-right: 10px;" clearable
                     v-model.number="editForm.type"
                     filterable
                     :disabled="title=='编辑'"
                     placeholder="请选择类型">
            <el-option label="装修材料"
                       :value="2"/>
            <el-option label="货架"
                       :value="1"/>
          </el-select>
        </p>
        <p><span style="width: 80px;">SKU编码：</span>
          <el-input :disabled="title=='编辑'" size="small" style="width: 250px" v-model="editForm.skuCode"
                    placeholder="请输入编码"></el-input>
        </p>
        <p><span style="width: 80px;">材料名称：</span>
          <el-input size="small" style="width: 250px" v-model="editForm.goodName" placeholder="请输入材料名称"></el-input>
        </p>

        <p><span style="width:80px;">单位：</span>
          <el-input size="small" style="width: 250px" v-model="editForm.unit" placeholder="请输入单位"></el-input>
        </p>
        <p><span style="width:80px;">规格：</span>
          <el-input size="small" style="width: 250px" v-model="editForm.size" placeholder="请输入规格"></el-input>
        </p>
        <p><span style="width:80px;">颜色：</span>
          <el-input size="small" style="width: 250px" v-model="editForm.color" placeholder="请输入颜色"></el-input>
        </p>
      </div>
      <span slot="footer">
        <el-button size="small" @click="editDialog=false">取消</el-button>
        <el-button size="small" type="primary" @click="comfirmEdit">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="tagShow" width="90%" top="50px">
      <el-table :data="tagData"
                height="calc(100vh - 280px)"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
          fontSize: '12px'
        }">
        <el-table-column type="index" label='序号' width="80px"></el-table-column>
        <el-table-column prop="warehouse" label='仓库'></el-table-column>
        <el-table-column prop="skuCode" label='SKU编码' show-overflow-tooltip></el-table-column>
        <el-table-column prop="goodName" label='材料名称' show-overflow-tooltip></el-table-column>
        <el-table-column prop="unit" label='单位'></el-table-column>
        <el-table-column prop="color" label='颜色'></el-table-column>
        <el-table-column prop="size" label='规格' show-overflow-tooltip></el-table-column>
        <el-table-column prop="num" label='标签下单品库存' width="150px"></el-table-column>
        <el-table-column prop="maxGoodsNum" label='标签下单品最大库存' width="150px"></el-table-column>
        <el-table-column prop="epc" label='epc编码' width="150px" show-overflow-tooltip></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import quinn from "../../utils/quinn";

export default {
  name: "skuMark",
  data() {
    return {
      skuData: [],
      provinceOptions: [],
      tagData: [],
      totalCount: 0,
      editForm: {
        areaId: "",
        type: "",
        goodName: "",
        skuCode: "",
        unit: "",
        size: "",
        color: "",
      },
      title: "",
      currentPage: 1,
      editDialog: false,
      tagShow: false,
      params: {
        pageNumber: 1,
        pageSize: 20,
        skuCode: "",
        goodName: "",
        spec: ""
      },
      authority: [],
      editId: "",
      editCell: {
        row: null,
        prop: '',
      },
    }
  },
  created() {
    const {authorityList = []} = quinn.getStorage('userData')
    this.authority = authorityList
    this.getList()
    this.getProvince()
  },
  methods: {
    getTagList(row) {
      const params = {
        skuCode: row.skuCode,
        pageNumber: 1,
        pageSize: 100,
      }
      this.$api.apiGetTagInfoList(params).then(res => {
        if (res.data.length != 0) {
          this.tagShow = true
          this.tagData = res.data
        } else {
          this.$message.warning('暂无数据')
        }
      })
    },
    _add() {
      this.editDialog = true
      this.title = '新增'
      this.editForm = this.$options.data.call(this).editForm
    },
    getProvince() {
      this.$api.areaLedgerAreaList().then(res => {
        this.provinceOptions = res;
      })
    },
    getList() {
      this.$api.apiGetTagInfoListBySku(this.params).then(res => {
        res.data.map((a) => {
          a.isEditable = false
        })
        this.skuData = res.data
        this.totalCount = res.total
      })
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getList()
    },
    _search() {
      this.params.pageNumber = 1
      this.getList()
    },
    _reset() {
      this.params = this.$options.data.call(this).params
      this.getList()
    },
    _edit(row) {
      this.editDialog = true
      this.title = '编辑'
      this.editId = row.id
      this.editForm = JSON.parse(JSON.stringify(row))
    },
    comfirmEdit() {
      const dataEdit = {
        goodName: this.editForm.goodName,
        unit: this.editForm.unit,
        size: this.editForm.size,
        color: this.editForm.color,
        skuCode: this.editForm.skuCode,
        areaId: this.editForm.areaId
      }
      if (this.title == '编辑') {
        this.$api.apiUpdateSKUInfo(dataEdit).then(res => {
          if (res == 1) {
            this.$message.success('编辑成功！')
            this.editDialog = false
            this.getList()
          }
        })
      } else if (this.title == '新增') {
        this.$api.apiAddSku(this.editForm).then(res => {
              if (res) {
                this.$message.success('新增成功！')
                this.editDialog = false
                this.getList()
              }
            }
        )
      }
    },
  }
}
</script>

<style scoped lang="less">
.editDiv {
  margin-left: 100px;

  p {
    margin-bottom: 10px;

    span {
      display: inline-block;
    }
  }
}
</style>